<template>
  <div style="  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;">
    <transition name="fade">
      <div ref="echartsContainer" v-show="showMask" style="width: 100%; height: 100%;"></div>
    </transition>
    <el-row :gutter="0" type="flex" justify="center" v-show="showLoginForm">
      <el-col :span="6">
        <el-form :model="userLoginDTO" v-if="showForm==='userPassword'">
          <el-form-item>
            <h2>登录&nbsp;&nbsp;&nbsp;login system</h2>
          </el-form-item>
          <el-form-item>
            <el-input v-model="userLoginDTO.userName" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="userLoginDTO.password" placeholder="密码" show-password></el-input>
          </el-form-item>
          <!--            <el-form-item label="验证码">-->
          <!--                <el-input v-model="loginForm.code"></el-input>-->
          <!--            </el-form-item>-->
          <el-form-item>
            <el-checkbox v-model="userLoginDTO.rememberMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="onRegister()">注册</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text">找回</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="onLoginByWx()">扫码登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onLogin()" size="mini">登 录</el-button>
            <el-button type="primary" @click="cancel()" size="mini">取 消</el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="showForm==='WX'">
          <h2>登录&nbsp;&nbsp;&nbsp;login system</h2>
          <el-form-item><img src="@/assets/wx.png" style="width: 9.375rem; height: 9.375rem;"></el-form-item>
          <el-form-item>
            <el-checkbox v-model="user.rememberMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="text">注册</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text">找回</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="onLoginByUser()">密码登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "LoginView",
  data() {
    return {
      showForm: 'userPassword',
      showMask: true,
      showLoginForm: false,
      userLoginDTO: {
        userName: "",
        password: "",
        rememberMe: true
      }
    }
  },
  methods: {
    onLogin() {
      console.log("Sending login request with:", JSON.stringify(this.userLoginDTO,null,2));
      this.$http.post("/users/login", this.userLoginDTO, {
        headers: {
          'Content-Type': 'application/json'
        },
        withCredentials: true
      }).then((response) => {
        if (response.data.code == 1) {
          const userData = response.data.data;
          localStorage.setItem('user', JSON.stringify(userData.user)); // 存储用户信息
          localStorage.setItem('username', this.userLoginDTO.userName); // 存储用户名
          location.href = "/";//跳转到首页
          console.log(response.data);
        } else {
          this.$message.error(response.data.msg);
        }
      })
    },
    onLoginByWx() {
      this.showForm = 'WX'
    },
    onLoginByUser() {
      this.showForm = 'userPassword'
    },
    cancel() {

    },
    onRegister() {
      location.href = '/registry'
    }
  },
  mounted() {
    this.$nextTick(() => {
      var myChart = echarts.init(this.$refs.echartsContainer)
      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
      const chartFontSize = rootFontSize * 5
      myChart.setOption({
            graphic: {
              elements: [
                {
                  type: 'text',
                  left: 'center',
                  bottom: '50%',
                  style: {
                    text: 'CFSWT Application',
                    fontSize: chartFontSize,
                    fontWeight: 'bold',
                    lineDash: [0, 200],
                    lineDashOffset: 0,
                    fill: 'transparent',
                    stroke: '#000',
                    lineWidth: 1
                  },
                  keyframeAnimation: {
                    duration: 2000,
                    loop: false,
                    keyframes: [
                      {
                        percent: 0.3,
                        style: {
                          fill: 'transparent',
                          lineDashOffset: 200,
                          lineDash: [200, 0]
                        }
                      },
                      {
                        percent: 0.5,
                        style: {
                          fill: 'transparent'
                        }
                      },
                      {
                        percent: 0.8,
                        style: {
                          fill: '#545454'
                        }
                      }
                    ]
                  }
                },
                {
                  type: 'group',
                  left: 'center',
                  bottom: '100px',
                  children: new Array(7).fill(0).map((val, i) => ({
                    type: 'rect',
                    x: i * 20,
                    shape: {
                      x: 0,
                      y: -40,
                      width: 1,
                      height: 25
                    },
                    style: {
                      fill: '#969696'
                    },
                    keyframeAnimation: {
                      duration: 1000,
                      delay: i * 200,
                      loop: true,
                      keyframes: [
                        {
                          percent: 0.4,
                          scaleY: 0.3,
                          easing: 'cubicIn'
                        },
                        {
                          percent: 0.6,
                          scaleY: 1,
                          easing: 'cubicOut'
                        }
                      ]
                    }
                  }))
                }
              ]
            }
          }
      );
      setTimeout(() => {
        this.showMask = false;
        setTimeout(() => {
          this.showLoginForm = true;
        }, 400); // 等待遮罩完全消失后显示表单
      }, 2000); // 遮罩显示时间
    });
  }
}
</script>

<style scoped>
.el-form {
  text-align: center;
  margin-top: 100px;
}

.el-divider {
  margin: 10px;
}

.el-form-item span {
  color: #545454;
}
</style>